<template>
	<view class="vertical-center">
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<image :src="item.imageUrl" mode="aspectFill" class="swiper-image"></image>
			</swiper-item>
		</swiper>

		<!-- 	<view class="grid-container">
			<view class="grid-item" v-for="(item, index) in gridList" :key="index" @tap="navigateTo(item.path)">
				<image :src="item.icon" mode="aspectFit" class="grid-icon"></image>
				<text class="grid-text">{{item.name}}</text>
			</view>
		</view> -->

		<view class="list-container">
			<view class="list-item" v-for="(item, index) in listData" :key="index" @click="toPublishDetail(item.publishId)">
				<image vi-if="item.publishImage" :src="cloudHost + item.publishImage.split(',')[0]" mode="aspectFill"
					class="list-image"></image>
				<text class="list-title">{{item.publishName}}</text>
				<text class="list-info">{{item.publishName}}</text>
			</view>
		</view>


	</view>
</template>

<script>
	export default {

		onShow: function() {
			this.getAllPublish();
		},
		data() {
			return {
				cloudHost: "https://mp-47da10d6-d2b4-4110-bc0e-6ffda223d01c.cdn.bspapp.com/user_image/",
				swiperList: [{
						imageUrl: '/static/banner.jpeg'
					},
					{
						imageUrl: '/static/banner.jpeg'
					},
					{
						imageUrl: '/static/banner.jpeg'
					}
				],
				gridList: [{
						name: '店铺转让',
						icon: '/static/logo.png',
						path: '/pages/target1/index'
					},
				],
				listData: [
				]
			}
		},
		methods: {
			navigateTo(path) {
				uni.navigateTo({
					url: path
				})
			},
			toPublishDetail(id) {				
				uni.navigateTo({
					url: '/pages/tabBar/publish/publishDetail?publishId=' + id
				})
			},
			getAllPublish() {
				let that = this
				uniCloud.callFunction({
					name: 'page-main',
					data: {
						dataType: "query"
					},
					success(res) {
						that.listData = res.result.list
					},
					fail() {

					}
				})
			},
		}
	}
</script>

<style>
	.vertical-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.swiper {
		height: 300rpx;
		width: 100%;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.grid-container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx;
	}

	.grid-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.grid-text {
		font-size: 24rpx;
		color: #333;
	}

	.list-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.list-item {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.list-image {
		width: 100%;
		height: 200rpx;
		object-fit: cover;
	}

	.list-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		padding: 10rpx;
	}

	.list-info {
		font-size: 24rpx;
		color: #666;
		padding: 0 10rpx 10rpx;
	}
</style>